Akordeony pouze v CSS: Tvorba widgetů s jedinou otevřenou sekcí pro vylepšené UX

Akordeony jsou základním prvkem moderního webového designu, který poskytuje čistý a efektivní způsob, jak prezentovat velké množství informací ve stravitelné formě. Jsou obzvláště užitečné pro často kladené dotazy (FAQ), popisy produktů a navigační menu. Tento článek se zabývá tvorbou akordeonů výhradně pomocí CSS s chováním jediné otevřené sekce, což znamená, že v jeden okamžik může být otevřena pouze jedna sekce akordeonu. Tento přístup zlepšuje uživatelskou zkušenost tím, že zabraňuje přetížení obsahem a podporuje soustředěné procházení.

Výhody akordeonů pouze v CSS

Tradiční akordeony založené na JavaScriptu často vyžadují správu stavu a zpracování událostí, což může vašemu kódu přidat na složitosti. Akordeony vytvořené výhradně v CSS naopak využívají sílu CSS selektorů a pseudotřídy `:checked` k dosažení požadované funkčnosti bez závislosti na JavaScriptu. To má za následek:

• Zlepšený výkon: Eliminace JavaScriptu zkracuje dobu načítání stránky a zlepšuje celkový výkon.
• Vylepšená přístupnost: Akordeony pouze v CSS lze snadno zpřístupnit pomocí správné HTML sémantiky a ARIA atributů.
• Zjednodušená údržba: Méně kódu znamená snazší údržbu a ladění.
• Lepší SEO: Čisté HTML a CSS mohou zlepšit optimalizaci pro vyhledávače.

Základní stavební kameny: Struktura HTML

Základem našeho akordeonu pouze v CSS je dobře strukturovaný HTML kód. Použijeme následující prvky:

• <input type="radio">: Radio buttony se používají k zajištění, že je otevřena pouze jedna sekce najednou. Atribut `name` je klíčový pro seskupení radio buttonů.
• <label>: Labely jsou spojeny s radio buttony a fungují jako záhlaví akordeonu.
• <div>: Kontejner pro obsah akordeonu.

Zde je základní struktura HTML:

<div class="accordion-container">
  <input type="radio" name="accordion" id="section1">
  <label for="section1">Název sekce 1</label>
  <div class="accordion-content">
    <p>Obsah pro sekci 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">Název sekce 2</label>
  <div class="accordion-content">
    <p>Obsah pro sekci 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">Název sekce 3</label>
  <div class="accordion-content">
    <p>Obsah pro sekci 3.</p>
  </div>
</div>

Vysvětlení:

• Třída `accordion-container` se používá pro stylování celkové struktury akordeonu.
• Každá sekce akordeonu se skládá z prvku `input` (radio button), `label` a `div` obsahujícího text.
• Atribut `name` radio buttonů je nastaven na "accordion", aby je seskupil a zajistil, že může být vybrán pouze jeden najednou.
• Atribut `for` u `label` odpovídá `id` příslušného `input`, čímž propojuje label s radio buttonem.

Stylování akordeonu pomocí CSS

Nyní přidáme CSS pro nastylování akordeonu a implementaci chování jediné otevřené sekce.

.accordion-container {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

input[type="radio"] {
  display: none;
}

label {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none; /* Počáteční skrytí obsahu */
}

input[type="radio"]:checked + label {
  background-color: #ddd;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block; /* Zobrazení obsahu po zaškrtnutí radio buttonu */
}

Vysvětlení:

• .accordion-container: Styluje kontejner s rámečkem a okrajem.
• input[type="radio"]: Skryje radio buttony, protože chceme zobrazit pouze labely.
• label: Styluje labely tak, aby vypadaly jako záhlaví akordeonu.
• .accordion-content: Počátečně skryje obsah pomocí `display: none`.
• input[type="radio"]:checked + label: Styluje label, když je příslušný radio button zaškrtnutý.
• input[type="radio"]:checked + label + .accordion-content: Toto je klíč k chování jediné otevřené sekce. Používá selektor přímého souseda (+) k zacílení na `accordion-content`, který bezprostředně následuje za `label` zaškrtnutého radio buttonu, a nastavuje jeho `display` na `block`, čímž ho zviditelní.

Vylepšení přístupnosti pomocí ARIA atributů

Abychom zajistili, že náš akordeon bude přístupný uživatelům s postižením, musíme přidat ARIA atributy. ARIA (Accessible Rich Internet Applications) atributy poskytují sémantické informace asistenčním technologiím, jako jsou čtečky obrazovky.

Takto můžeme vylepšit přístupnost:

<div class="accordion-container" role="presentation"> 
  <input type="radio" name="accordion" id="section1" aria-controls="content1">
  <label for="section1" aria-expanded="false" aria-controls="content1">Název sekce 1</label>
  <div id="content1" class="accordion-content" role="region" aria-labelledby="section1">
    <p>Obsah pro sekci 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false" aria-controls="content2">Název sekce 2</label>
  <div id="content2" class="accordion-content" role="region" aria-labelledby="section2">
    <p>Obsah pro sekci 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false" aria-controls="content3">Název sekce 3</label>
  <div id="content3" class="accordion-content" role="region" aria-labelledby="section3">
    <p>Obsah pro sekci 3.</p>
  </div>
</div>

Vysvětlení:

• role="presentation" na kontejneru skrývá sémantický význam kontejneru, což umožňuje vnořeným ARIA rolím správně komunikovat strukturu.
• aria-controls: Označuje prvek, který je ovládán aktuálním prvkem (v tomto případě sekce s obsahem).
• aria-expanded: Označuje, zda je ovládaný prvek aktuálně rozbalený nebo sbalený. Ačkoli tuto hodnotu neměníme dynamicky pomocí JavaScriptu, je dobré ji zahrnout. Složitější příklad by mohl použít JavaScript k přepínání její hodnoty. Počáteční hodnota je nastavena na `false`.
• role="region": Identifikuje sekci s obsahem jako samostatnou oblast na stránce.
• aria-labelledby: Identifikuje label, který popisuje sekci s obsahem.

Důležité aspekty přístupnosti:

• Navigace pomocí klávesnice: Ujistěte se, že uživatelé mohou procházet sekcemi akordeonu pomocí klávesnice (např. klávesou Tab).
• Kompatibilita se čtečkami obrazovky: Otestujte akordeon se čtečkou obrazovky, abyste se ujistili, že obsah je správně ohlašován.
• Barevný kontrast: Zajistěte dostatečný barevný kontrast mezi textem a pozadím pro uživatele se zrakovým postižením.

Přizpůsobení a vylepšení

Základní akordeon pouze v CSS lze dále přizpůsobit a vylepšit tak, aby splňoval specifické požadavky na design.

Přidání přechodů (transitions)

Pro vytvoření plynulejší uživatelské zkušenosti můžeme přidat CSS přechody k obsahu akordeonu.

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none;
  transition: max-height 0.3s ease-out; /* Přidání přechodu */
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block;
  max-height: 500px; /* Nastavení maximální výšky pro přechod */
}

Vysvětlení:

• Přidali jsme vlastnost `transition` do `.accordion-content` pro animaci vlastnosti `max-height`.
• Nastavili jsme počáteční `max-height` na `0`, abychom skryli obsah.
• Když je radio button zaškrtnutý, nastavíme `max-height` na dostatečně velkou hodnotu (např. `500px`), aby se obsah mohl plynule rozbalit. `overflow: hidden` zabraňuje přetékání obsahu během přechodu, pokud je skutečná výška obsahu menší než 500px.

Stylování pomocí ikon

Přidání ikon do záhlaví akordeonu může zlepšit vizuální přitažlivost a srozumitelnost pro uživatele. Pro tento účel můžete použít CSS pseudoelementy nebo ikonové fonty.

Použití CSS pseudoelementů:

label::after {
  content: '+'; /* Počáteční ikona */
  float: right;
  font-size: 1.2em;
}

input[type="radio"]:checked + label::after {
  content: '-'; /* Změna ikony při rozbalení */
}

Použití ikonových fontů (např. Font Awesome):

1. Zahrňte Font Awesome CSS do vašeho HTML: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="..." crossorigin="anonymous" />
2. Použijte příslušné třídy Font Awesome ve svých labelech:

<label for="section1">Název sekce 1 <i class="fas fa-plus"></i></label>

Poté použijte CSS ke změně ikony, když je sekce rozbalená:

input[type="radio"]:checked + label i.fas.fa-plus {
  display: none;
}

input[type="radio"]:checked + label {
    /* vložit ikonu mínus */
}

input[type="radio"]:checked + label::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f068"; /* unicode pro fa-minus */
    float:right;
}

Aspekty responzivního designu

Ujistěte se, že váš akordeon funguje dobře na různých velikostech obrazovky pomocí technik responzivního designu. Můžete použít media queries k úpravě stylů akordeonu na základě šířky obrazovky.

Příklad:

@media (max-width: 768px) {
  .accordion-container {
    width: 100%; /* Úprava šířky pro menší obrazovky */
  }

  label {
    padding: 8px;
    font-size: 0.9em; /* Úprava velikosti písma */
  }
}

Pokročilé techniky

Zatímco základní akordeon pouze v CSS poskytuje pevný základ, existují pokročilé techniky, které mohou dále vylepšit jeho funkčnost a uživatelskou zkušenost.

Uchování stavu pomocí Local Storage

Můžete použít JavaScript (ačkoli to popírá čistě CSS přístup) a local storage k zapamatování stavu akordeonu, takže když se uživatel vrátí na stránku, dříve otevřené sekce zůstanou otevřené.

Dynamické načítání obsahu

Pro akordeony s velkým množstvím obsahu můžete obsah načítat dynamicky pomocí AJAXu. To může zlepšit počáteční dobu načítání stránky a snížit využití šířky pásma.

Řešení běžných problémů

Zde jsou některé běžné problémy, se kterými se můžete setkat při implementaci akordeonů pouze v CSS, a jak je vyřešit:

• Akordeon nefunguje:
  • Ujistěte se, že atribut `name` radio buttonů je stejný pro všechny sekce.
  • Ověřte, že atribut `for` u `label` odpovídá `id` příslušného `input`.
  • Zkontrolujte své CSS selektory na případné překlepy nebo chyby.
• Obsah se na začátku neskrývá:
  • Ujistěte se, že styl `display: none` je aplikován na třídu `.accordion-content`.
• Přechody nefungují:
  • Ověřte, že vlastnost `transition` je aplikována na správný prvek (`.accordion-content`).
  • Ujistěte se, že `max-height` je na začátku nastavena na `0` a na dostatečně velkou hodnotu, když je radio button zaškrtnutý.
• Problémy s přístupností:
  • Použijte čtečku obrazovky k otestování akordeonu a identifikaci jakýchkoli problémů s přístupností.
  • Ujistěte se, že ARIA atributy jsou správně implementovány.

Příklady z praxe

Akordeony pouze v CSS lze použít v různých reálných scénářích:

• Stránky s často kladenými dotazy (FAQ): Prezentace často kladených otázek stručným a organizovaným způsobem.

  Příklad: Webové stránky univerzity používající akordeon k zobrazení často kladených dotazů o přijímacím řízení pro zahraniční studenty, pokrývající témata jako vízové požadavky, školné v různých měnách a možnosti ubytování.

• Popisy produktů: Zobrazení podrobností o produktu, specifikací a recenzí.

  Příklad: E-shop používající akordeon k zobrazení různých aspektů produktu, jako jsou technické specifikace (napětí, rozměry), složení materiálu a země původu pro globální publikum.

• Navigační menu: Vytváření rozbalovacích menu pro webové stránky s komplexními navigačními strukturami.

  Příklad: Vládní webové stránky se složitou organizační strukturou, které používají akordeony k rozdělení ministerstev a služeb pro občany z různých prostředí, čímž zajišťují, že obsah je snadno přístupný bez ohledu na jazyk nebo znalost vlády.

• Formuláře: Rozdělení dlouhých formulářů na zvládnutelné sekce.

  Příklad: Online přihláška do globálního stipendijního programu, která používá akordeony k oddělení sekcí jako osobní údaje, akademická historie a finanční informace, což zlepšuje uživatelskou zkušenost pro žadatele z různých zemí s různými vzdělávacími systémy.

Závěr

Akordeony pouze v CSS s funkcí jediné otevřené sekce nabízejí výkonný a efektivní způsob, jak zlepšit uživatelskou zkušenost a přístupnost na vašem webu. Využitím síly CSS selektorů a ARIA atributů můžete vytvářet interaktivní prvky, které jsou výkonné, udržovatelné a přístupné širokému spektru uživatelů. Ať už vytváříte jednoduchou stránku s často kladenými dotazy nebo komplexní webovou aplikaci, akordeony pouze v CSS vám mohou pomoci prezentovat informace jasným a poutavým způsobem, což přispívá k lepší celkové uživatelské zkušenosti pro globální publikum.

Další zdroje pro studium

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
• ARIA Authoring Practices Guide (APG): https://www.w3.org/WAI/ARIA/apg/
• WebAIM: https://webaim.org/